<template>
  <div class="list viewport">
    <div class="list-phantom"></div>
    <ul class="list-area">
      <li class="item" v-for="item in dataList">
        <div class="tip-show" :class="['color' + item.alarmUrgency]"><span class="icon iconfontShuzhi icon-gaojing"> {{ setLevelTxt(item) }}</span></div>
        <div class="top">
          <p class="txt tt light"><span class="tip ">【{{ item.categoryName }}】</span> <span class="name" :title="item.deviceName">{{ item.deviceName }}</span></p>
          <p class="txt"><span class="icon iconfontShuzhi icon-baojing"></span><span class="tip">报警类型：</span> <span class="name">{{ item.eventName }}</span></p>
          <p class="txt"><span class="icon iconfontShuzhi icon-shijian"></span><span class="tip">报警时间：</span> <span class="name">{{ item.happenTime }}</span></p>
        </div>
        <div class="img">
          <img class="image" :src="inFilePrefix + (item.alarmPics && item.alarmPics[0])" alt="">
          <!-- <img class="image" src="@/assets/images/acreagebg.png" alt=""> -->
          <!-- <el-image class="image" src="@/" fit="cover"></el-image> -->
        </div>
        <div class="status">
          <div class="txt">
            <slot name="status" :scope="item"></slot>
            <!-- <div class="status-content"><span class="status-normal-radius"></span><span class="status-normal">已完成</span></div> -->
          </div>
          <div class="status-btn" @click="dealwith(item)">处理</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'listItem',
  props: {
    dictMap: {
      type: Object,
      default: () => { },
    },
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {

    };
  },
  computed: {
    ...mapState('config', ['inFilePrefix'])
  },
  watch: {},
  created() {
    this.setDictList()
  },
  mounted() {

  },
  methods: {
    dealwith(item) {
      this.$emit("dealwith", item)
    },
    // 设置formItemConfig里面的字典列表
    setDictList() {
      if (this.dictMap) {
        // console.log('dictMap:', this.dictMap)
      }
    },
    // 设置等级
    setLevelTxt(obj) {
      let level;
      let item = this.dictMap.type.alarm_urgency_status.filter(item => item.value == obj.alarmUrgency)[0]
      switch (obj.alarmUrgency) {
        case "1":
          level = "I"
          break;
        case "2":
          level = "II"
          break;
        case "3":
          level = "III"
          break;
        case "4":
          level = "IV"
          break;
        default:
          level = ""
          break;
      }
      return level + "级 " + (item ? item.label : '')
    }
  },
  components: {},
}
</script>

<style lang='less' scoped>
.list {
  overflow: auto;
  height: calc(100%);
  margin-top: 10px;

  .item {
    position: relative;
    border: 1px solid rgba(143, 171, 191, 0.3);
    background: rgba(143, 171, 191, 0.1);
    height: 340px;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;

    &::after {
      position: absolute;
      top: 5px;
      left: 5px;
      content: "";
      border-top: 5px solid @primary;
      border-right: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }

    p {
      display: flex;
      color: #D9E7FF;
      font-size: 12px;

      .icon {
        margin-right: 5px;
      }
    }

    p.txt:first-child {
      font-size: 15px;

    }

    p.tt {
      display: block;
      max-width: 280px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tip-show {
      position: absolute;
      right: 10px;
      top: 10px;
    }

    // 重大
    .color1 {
      color: #FF3838;
    }

    // 较大
    .color2 {
      color: #FF7734;
    }

    // 一般
    .color3 {
      color: #FFDA98;
    }

    // 低
    .color4 {
      color: #66E1DF;
    }
  }

  .img {
    width: 100%;
    height: 200px;
    margin-top: 10px;

    .image {
      width: 100%;
      height: 100%;
    }
  }

  .status {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }

  .status-btn {
    border: 1px solid fade(@primary, 40);
    color: @primary;
    background: fade(@primary, 10);
    padding: 0 5px;
    cursor: pointer;
  }
}
</style>